<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>语言基础 | Freeisms</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <meta name="description" content="记录个人前端技术成长点滴">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/assets/css/0.styles.9efbc543.css" as="style"><link rel="preload" href="/assets/js/app.e45e7f79.js" as="script"><link rel="preload" href="/assets/js/4.1dc261f9.js" as="script"><link rel="preload" href="/assets/js/32.57021f58.js" as="script"><link rel="prefetch" href="/assets/js/10.910e44c4.js"><link rel="prefetch" href="/assets/js/11.3cb7fbc0.js"><link rel="prefetch" href="/assets/js/12.e84e4441.js"><link rel="prefetch" href="/assets/js/13.a20b1e0e.js"><link rel="prefetch" href="/assets/js/14.5bb81eb0.js"><link rel="prefetch" href="/assets/js/15.9ac9c7b5.js"><link rel="prefetch" href="/assets/js/16.e65d6e8b.js"><link rel="prefetch" href="/assets/js/17.3bcb37e9.js"><link rel="prefetch" href="/assets/js/18.238c27dc.js"><link rel="prefetch" href="/assets/js/19.0bf085fb.js"><link rel="prefetch" href="/assets/js/20.af32ca4b.js"><link rel="prefetch" href="/assets/js/21.d7d0a4bf.js"><link rel="prefetch" href="/assets/js/22.fb0bd41c.js"><link rel="prefetch" href="/assets/js/23.e40c513c.js"><link rel="prefetch" href="/assets/js/24.df877caa.js"><link rel="prefetch" href="/assets/js/25.ff943ee7.js"><link rel="prefetch" href="/assets/js/26.6975fab4.js"><link rel="prefetch" href="/assets/js/27.49355cdd.js"><link rel="prefetch" href="/assets/js/28.08ac8c0a.js"><link rel="prefetch" href="/assets/js/29.864244b6.js"><link rel="prefetch" href="/assets/js/30.9fde9cc1.js"><link rel="prefetch" href="/assets/js/31.04c169d6.js"><link rel="prefetch" href="/assets/js/33.09502731.js"><link rel="prefetch" href="/assets/js/34.8a018286.js"><link rel="prefetch" href="/assets/js/35.097f93be.js"><link rel="prefetch" href="/assets/js/36.37ccdfeb.js"><link rel="prefetch" href="/assets/js/37.11976f3e.js"><link rel="prefetch" href="/assets/js/38.98243aad.js"><link rel="prefetch" href="/assets/js/39.a3c78447.js"><link rel="prefetch" href="/assets/js/40.7be6398d.js"><link rel="prefetch" href="/assets/js/41.33d492ee.js"><link rel="prefetch" href="/assets/js/42.f1c675e6.js"><link rel="prefetch" href="/assets/js/43.bbda546b.js"><link rel="prefetch" href="/assets/js/44.2dc401cd.js"><link rel="prefetch" href="/assets/js/45.33bd1151.js"><link rel="prefetch" href="/assets/js/46.b6b09012.js"><link rel="prefetch" href="/assets/js/47.55feb448.js"><link rel="prefetch" href="/assets/js/48.fc9dc909.js"><link rel="prefetch" href="/assets/js/49.fd6d33c4.js"><link rel="prefetch" href="/assets/js/5.ac586c16.js"><link rel="prefetch" href="/assets/js/50.8e33b7f9.js"><link rel="prefetch" href="/assets/js/51.fd278c0a.js"><link rel="prefetch" href="/assets/js/52.fbd66a3b.js"><link rel="prefetch" href="/assets/js/53.f829ac68.js"><link rel="prefetch" href="/assets/js/54.7c7e5ec8.js"><link rel="prefetch" href="/assets/js/55.42e87201.js"><link rel="prefetch" href="/assets/js/56.2301ffbd.js"><link rel="prefetch" href="/assets/js/57.6d5ed1a9.js"><link rel="prefetch" href="/assets/js/58.8dc29eab.js"><link rel="prefetch" href="/assets/js/59.722945c8.js"><link rel="prefetch" href="/assets/js/6.64876e20.js"><link rel="prefetch" href="/assets/js/60.c43354e4.js"><link rel="prefetch" href="/assets/js/61.b9d1ad1d.js"><link rel="prefetch" href="/assets/js/62.d61bfc10.js"><link rel="prefetch" href="/assets/js/63.d84a88b5.js"><link rel="prefetch" href="/assets/js/64.0f25c14d.js"><link rel="prefetch" href="/assets/js/7.d74ac93a.js"><link rel="prefetch" href="/assets/js/8.6c8e2482.js"><link rel="prefetch" href="/assets/js/9.085dc649.js"><link rel="prefetch" href="/assets/js/vendors~flowchart.4e554982.js"><link rel="prefetch" href="/assets/js/vendors~notification.4b668bb8.js">
    <link rel="stylesheet" href="/assets/css/0.styles.9efbc543.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">Freeisms</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my-docs/js/" class="nav-link router-link-active">
  JavaScript
</a></div><div class="nav-item"><a href="/my-docs/design-pattern/" class="nav-link">
  设计模式
</a></div><div class="nav-item"><a href="/my-docs/leetcode/" class="nav-link">
  LeetCode
</a></div><div class="nav-item"><a href="/my-docs/library/vue-juejin-comment.html" class="nav-link">
  开源库
</a></div><div class="nav-item"><a href="https://www.striveforus.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/Fengfengfeng-up/personal-docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my-docs/js/" class="nav-link router-link-active">
  JavaScript
</a></div><div class="nav-item"><a href="/my-docs/design-pattern/" class="nav-link">
  设计模式
</a></div><div class="nav-item"><a href="/my-docs/leetcode/" class="nav-link">
  LeetCode
</a></div><div class="nav-item"><a href="/my-docs/library/vue-juejin-comment.html" class="nav-link">
  开源库
</a></div><div class="nav-item"><a href="https://www.striveforus.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/Fengfengfeng-up/personal-docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/my-docs/js/" aria-current="page" class="sidebar-link">写在前面</a></li><li><a href="/my-docs/js/what-is-javascript.html" class="sidebar-link">什么是 JavaScript</a></li><li><a href="/my-docs/js/javascript-in-html.html" class="sidebar-link">HTML 中的 JavaScript</a></li><li><a href="/my-docs/js/language-basics.html" aria-current="page" class="active sidebar-link">语言基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#语法" class="sidebar-link">语法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#标识符" class="sidebar-link">标识符</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#语句" class="sidebar-link">语句</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#关键字与保留字" class="sidebar-link">关键字与保留字</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#严格模式" class="sidebar-link">严格模式</a></li></ul></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#变量" class="sidebar-link">变量</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#var" class="sidebar-link">var</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#let" class="sidebar-link">let</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#const" class="sidebar-link">const</a></li></ul></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#数据类型" class="sidebar-link">数据类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#typeof-操作符" class="sidebar-link">typeof 操作符</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#undefined-类型" class="sidebar-link">Undefined 类型</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#null-类型" class="sidebar-link">Null 类型</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#boolean-类型" class="sidebar-link">Boolean 类型</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#number-类型" class="sidebar-link">Number 类型</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#string-类型" class="sidebar-link">String 类型</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#symbol-类型" class="sidebar-link">Symbol 类型</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#bigint-类型" class="sidebar-link">BigInt 类型</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#object-类型" class="sidebar-link">Object 类型</a></li></ul></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#操作符" class="sidebar-link">操作符</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#一元操作符" class="sidebar-link">一元操作符</a></li><li class="sidebar-sub-header"><a href="/my-docs/js/language-basics.html#位操作符" class="sidebar-link">位操作符</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="语言基础"><a href="#语言基础" class="header-anchor">#</a> 语言基础</h1> <h2 id="语法"><a href="#语法" class="header-anchor">#</a> 语法</h2> <p>ECMAScript 的语法很大程度上借鉴了 C 语言和其他类 C 语言，ECMAScript 中无论是变量、函数名还是操作符，都区分大小写。</p> <h3 id="标识符"><a href="#标识符" class="header-anchor">#</a> 标识符</h3> <p><strong>标识符</strong>，就是变量、函数、属性或函数参数的名称，由一或多个下列字符组成：</p> <ul><li>首字符必须是字母、下划线（_） 或 $。</li> <li>剩余字符可以是字母、下划线、$ 或数字。</li></ul> <div class="custom-block tip"><p class="custom-block-title">惯例</p> <p>ECMAScript 标识符使用驼峰大小写形式，如 <code>helloWorld</code>。</p></div> <div class="custom-block warning"><p class="custom-block-title">注意</p> <p>关键字、保留字、<code>true</code>、<code>false</code> 和 <code>null</code> 不能作为标识符。</p></div> <h3 id="语句"><a href="#语句" class="header-anchor">#</a> 语句</h3> <p>ECMAScript 中的语句一般以分号结尾，也可以省略分号。多条语句可以合并到一个 C 语言风格的代码块中，代码块由一个左花括号 <code>{</code> 标识开始，一个右花括号 <code>}</code> 标识结束。</p> <h3 id="关键字与保留字"><a href="#关键字与保留字" class="header-anchor">#</a> 关键字与保留字</h3> <p>ECMA-262 中的<strong>关键字</strong>和<strong>保留字</strong>（未来的关键字）有特殊用途或者执行特定的操作，不能用作标识符或属性名。所有关键字及保留字如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/* ECMA-262 第 6 版规定的所有关键字 */</span>
<span class="token keyword">break</span> <span class="token keyword">do</span> <span class="token keyword">in</span> <span class="token keyword">typeof</span> <span class="token keyword">case</span> <span class="token keyword">else</span> <span class="token keyword">instanceof</span> <span class="token class-name">var</span> <span class="token keyword">catch</span> <span class="token keyword">export</span> <span class="token keyword">new</span> <span class="token class-name">void</span> <span class="token keyword">class</span> <span class="token class-name">extends</span> <span class="token keyword">return</span> <span class="token keyword">while</span> <span class="token keyword">const</span> finally <span class="token keyword">super</span> <span class="token keyword">with</span> <span class="token keyword">continue</span> <span class="token keyword">for</span> <span class="token keyword">switch</span> <span class="token keyword">yield</span> <span class="token keyword">debugger</span> <span class="token keyword">function</span> <span class="token keyword">this</span> <span class="token keyword">default</span> <span class="token keyword">if</span> <span class="token keyword">throw</span> <span class="token keyword">delete</span> <span class="token keyword">import</span> <span class="token keyword">try</span> 

<span class="token comment">/* 未来的保留字 */</span>
<span class="token comment">// 始终保留:</span>
<span class="token keyword">enum</span> 

<span class="token comment">// 严格模式下保留:</span>
<span class="token keyword">implements</span> <span class="token class-name">package</span> <span class="token keyword">public</span>
<span class="token keyword">interface</span> <span class="token class-name">protected</span> <span class="token keyword">static</span>
<span class="token keyword">let</span> <span class="token keyword">private</span>

<span class="token comment">// 模块代码中保留:</span>
<span class="token keyword">await</span> 
</code></pre></div><h3 id="严格模式"><a href="#严格模式" class="header-anchor">#</a> 严格模式</h3> <p>ECMAScript 5 增加了<strong>严格模式</strong>，它是一种不同的 JavaScript 解析和执行模型，所有现代浏览器都支持。严格模式下，ECMAScript 3 中不规范的写法会被处理，不安全的活动将抛出错误，详细变化请查看 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode" target="_blank" rel="noopener noreferrer">严格模式 - JavaScript | MDN<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>为整个脚本文件开启严格模式，需要在脚本开头加上这一行预处理指令：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 整个脚本都开启严格模式的语法</span>
<span class="token string">&quot;use strict&quot;</span><span class="token punctuation">;</span>
</code></pre></div><p>也可以单独给某个函数开启严格模式：</p> <div class="language-js extra-class"><div class="highlight-lines"><br><div class="highlighted"> </div><br><br><br></div><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token string">&quot;use strict&quot;</span><span class="token punctuation">;</span>
 <span class="token comment">// 函数级别严格模式语法</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="变量"><a href="#变量" class="header-anchor">#</a> 变量</h2> <p>ECMAScript 变量是松散类型的，可以保存任何类型的数据。有 3 个关键字用于声明变量：<code>var</code>、<code>const</code> 和 <code>let</code>。</p> <h3 id="var"><a href="#var" class="header-anchor">#</a> var</h3> <p>使用 <code>var</code> 关键字声明变量：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// undefined 不初始化的情况下，变量会保存特殊值 undefined</span>

<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token string">'foo'</span> <span class="token comment">// 声明变量并初始化，b 被定义为一个保存字符串值 foo 的变量</span>
b <span class="token operator">=</span> <span class="token number">1</span> <span class="token comment">// 不仅可以改变变量保存的值，也可以改变值的类型</span>

<span class="token comment">// 一条语句中声明多个变量</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
  d <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">,</span>
  e

<span class="token comment">// 重复声明会被合并为一个声明</span>
<span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">'neal'</span>
<span class="token keyword">var</span> name
</code></pre></div><ul><li><p>声明作用域<br>
在函数中使用 <code>var</code> 声明的变量会成为该函数的局部变量，因此该变量在函数退出时会被销毁。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'hi'</span> <span class="token comment">// 局部变量</span>
<span class="token punctuation">}</span>

<span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// ReferenceError: a is not define</span>
</code></pre></div></li> <li><p>声明提升<br>
使用 <code>var</code> 声明的变量会被提升到所在作用域的顶部。</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token comment">// undefined</span>
<span class="token keyword">var</span> obj

<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
  <span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">26</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  
</code></pre></div></li> <li><p>全局声明<br>
浏览器环境下，在全局作用域中使用 <code>var</code> 声明的变量会成为 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window" target="_blank" rel="noopener noreferrer">window<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 对象的属性。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>age<span class="token punctuation">)</span> <span class="token comment">// 1</span>
</code></pre></div></li></ul> <h3 id="let"><a href="#let" class="header-anchor">#</a> let</h3> <p><code>let</code> 跟 <code>var</code> 的作用相似，但有以下重要区别。</p> <ul><li><p><code>let</code> 声明的范围是块级作用域。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">'neal'</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token comment">// &quot;neal&quot;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token comment">// &quot;neal&quot;</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">'feng'</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token comment">// &quot;feng&quot;</span>
<span class="token punctuation">}</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token comment">// ReferenceError: name is not define</span>
</code></pre></div></li> <li><p><code>let</code> 不允许同一个块作用域中出现冗余声明。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> name
<span class="token keyword">let</span> name <span class="token comment">// SyntaxError: Identifier 'name' has already been declared</span>

<span class="token keyword">let</span> age
<span class="token keyword">let</span> age <span class="token comment">// SyntaxError: Identifier 'name' has already been declared </span>
</code></pre></div></li> <li><p><code>let</code> 声明的变量不会在作用域中被提升。<br>
在 let 声明之前的执行瞬间被称为“暂时性死区”，这时引用任何后面才声明的变量都会抛出 ReferenceError（引用错误）。</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token comment">// ReferenceError: Cannot access 'name' before initialization</span>
<span class="token keyword">let</span> name
</code></pre></div></li> <li><p>浏览器环境中，使用<code>let</code> 在全局作用域声明的变量不会成为 window 对象的属性。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">18</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>age<span class="token punctuation">)</span> <span class="token comment">// undefined</span>
</code></pre></div></li> <li><p>使用 <code>let</code> 声明变量不能依赖条件声明模式。<br>
因为 <code>let</code> 的作用域是块，所以无法检查前面是否已经使用 let 声明过同名变量，也无法在没有声明的情况下声明它。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">try</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> a <span class="token comment">// 变量 a 被限制在 catch {}块的作用域内</span>
<span class="token punctuation">}</span>
a <span class="token operator">=</span> <span class="token number">1</span> <span class="token comment">// 这个赋值形同全局赋值</span>
</code></pre></div></li> <li><p><code>for</code> 循环中的 <code>let</code> 声明<br>
使用 <code>let</code> 声明迭代变量时，引擎在后台会为每个迭代循环声明一个新的迭代变量。<code>let</code> 不仅会将这个变量绑定到 <code>for</code> 循环的块中，还会将它重新绑定到循环的每一个迭代中，并使用上一个循环迭代结束时的值重新进行赋值。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">6</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 依次输出 6、 6、 6、 6、 6</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token comment">// 6</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> <span class="token number">6</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>j<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 依次输出 1、 2、 3、 4、 5</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>j<span class="token punctuation">)</span> <span class="token comment">// ReferenceError: j is not defined</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> k <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> k <span class="token operator">&lt;</span> <span class="token number">6</span><span class="token punctuation">;</span> k<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> l <span class="token operator">=</span> k
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>l<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 依次输出 1、 2、 3、 4、 5</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>l<span class="token punctuation">)</span> <span class="token comment">// ReferenceError: l is not defined</span>
</code></pre></div></li></ul> <h3 id="const"><a href="#const" class="header-anchor">#</a> const</h3> <p><code>const</code> 的行为与 <code>let</code> 基本相同，区别是用它声明变量时必须同时初始化变量，且尝试修改 <code>const</code> 声明的变量会导致运行时错误。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span>
a <span class="token operator">=</span> <span class="token number">2</span> <span class="token comment">// TypeError: Assignment to constant variable.</span>
</code></pre></div><ul><li><code>const</code> 声明的限制只适用于它指向的变量的引用。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
person<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'neal'</span><span class="token punctuation">;</span> <span class="token comment">// 不会报错 </span>
</code></pre></div><details class="custom-block details"><summary>在函数中，如果去掉声明语句的关键字，该变量会变为全局变量，在函数外部也能访问到。</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  a <span class="token operator">=</span> <span class="token string">'hi'</span> <span class="token comment">// 局部变量</span>
<span class="token punctuation">}</span>

<span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// &quot;hi&quot;</span>
</code></pre></div></details> <details class="custom-block details"><summary>严格模式下，如果在函数中给未声明的变量赋值，会抛出 ReferenceError。</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token string">'use strict'</span>
  a <span class="token operator">=</span> <span class="token string">'hi'</span> <span class="token comment">// ReferenceError: a is not define</span>
<span class="token punctuation">}</span>

<span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></details> <div class="custom-block tip"><p class="custom-block-title">最佳实践</p> <ul><li>尽量不用行为怪异的 <code>var</code>。</li> <li>优先使用 <code>const</code>，其次使用 <code>let</code>。</li> <li>借助 <a href="http://eslint.cn/" target="_blank" rel="noopener noreferrer">ESLint<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 代码检查工具可以高效地帮助我们规范书写 JavaScript 代码。</li></ul></div> <h2 id="数据类型"><a href="#数据类型" class="header-anchor">#</a> 数据类型</h2> <p>ECMAScript 有 8 种基本的数据类型，其中包括 Undefined、Null、Boolean、Number、String、Symbol（ES6 新增）和 BigInt（ES11 新增） 7 种原始类型和 Object 引用类型。</p> <h3 id="typeof-操作符"><a href="#typeof-操作符" class="header-anchor">#</a> typeof 操作符</h3> <p><strong>typeof</strong> 操作符返回参数的类型。对一个值使用 <code>typeof</code> 操作符会返回下列字符串之一：</p> <ul><li><code>undefined</code> 表示值未定义；</li> <li><code>boolean</code> 表示值为布尔值；</li> <li><code>string</code> 表示值为字符串；</li> <li><code>number</code> 表示值为数值；</li> <li><code>bigint</code> 表示值为任意大的整数；</li> <li><code>object</code> 表示值为对象（不是函数）或 <code>null</code>；</li> <li><code>function</code> 表示值为函数；</li> <li><code>symbol</code> 表示值为符号。</li></ul> <h3 id="undefined-类型"><a href="#undefined-类型" class="header-anchor">#</a> Undefined 类型</h3> <p><strong>Undefined</strong> 类型只有一个特殊值 <code>undefined</code>。当使用 <code>var</code> 或 <code>let</code> 声明了变量但没有初始化时，就相当于给变量赋予了 <code>undefined</code> 值：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> name
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token comment">// undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre></div><p>当对未声明过的变量使用 <code>typeof</code> 操作符时，也会返回 <code>undefined</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// let age </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> age<span class="token punctuation">)</span> <span class="token comment">// &quot;undefined&quot;</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">建议</p> <p>在使用 <code>var</code> 或 <code>let</code> 声明变量时，同时进行初始化，这样当使用 <code>typeof</code> 返回 <code>undefined</code> 时，就可以确定这个变量是没有声明过的。</p></div> <p>使用 <code>void</code> 运算符可以得到 <code>undefined</code> 值。</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">void</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">void</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token comment">// undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">void</span> <span class="token number">0</span> <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre></div><h3 id="null-类型"><a href="#null-类型" class="header-anchor">#</a> Null 类型</h3> <p><strong>Null</strong> 类型只有一个特殊值 <code>null</code>，表示一个空对象指针，通常用以初始化将来要保存对象值的变量。<br>
对值为 <code>null</code> 的变量使用 <code>typeof</code> 会返回 <code>object</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token keyword">null</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token comment">// &quot;object&quot;</span>
</code></pre></div><p><code>undefined</code> 值是由 <code>null</code> 值派生而来的，因此 ECMA-262 将它们定义为表面上相等。</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">undefined</span> <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre></div><h3 id="boolean-类型"><a href="#boolean-类型" class="header-anchor">#</a> Boolean 类型</h3> <p><strong>Boolean</strong>（布尔值）类型仅包含两个值：<code>true</code> 和 <code>false</code>。<br>
其他类型的值都可以通过 <code>Boolean()</code> 转型函数转为布尔值。<code>if</code> 等流控制语句会自动执行其他类型值到布尔值的转换。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">'neal'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Boolean</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'ok'</span><span class="token punctuation">)</span> <span class="token comment">// ok</span>
<span class="token punctuation">}</span>
</code></pre></div><p>不同类型与布尔值之间的转换规则如下：</p> <table><thead><tr><th style="text-align:left;">数据类型</th> <th style="text-align:left;">转为 <code>true</code></th> <th style="text-align:left;">转为 <code>false</code></th></tr></thead> <tbody><tr><td style="text-align:left;">Boolean</td> <td style="text-align:left;"><code>true</code></td> <td style="text-align:left;"><code>false</code></td></tr> <tr><td style="text-align:left;">String</td> <td style="text-align:left;">非空字符串</td> <td style="text-align:left;"><code>&quot;&quot;</code>（空字符串）</td></tr> <tr><td style="text-align:left;">Number</td> <td style="text-align:left;">非零数值</td> <td style="text-align:left;"><code>0</code>、<code>NaN</code></td></tr> <tr><td style="text-align:left;">Object</td> <td style="text-align:left;">任意对象</td> <td style="text-align:left;"><code>null</code></td></tr> <tr><td style="text-align:left;">Undefined</td> <td style="text-align:left;">-</td> <td style="text-align:left;"><code>undefined</code></td></tr></tbody></table> <h3 id="number-类型"><a href="#number-类型" class="header-anchor">#</a> Number 类型</h3> <p><strong>Number</strong> 类型使用 <a href="http://en.wikipedia.org/wiki/IEEE_754-1985" target="_blank" rel="noopener noreferrer">IEEE 754<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 格式表示整数和浮点值。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span> <span class="token comment">// 十进制 18</span>
<span class="token keyword">let</span> octaNum <span class="token operator">=</span> <span class="token number">0o20</span> <span class="token comment">// 八进制 18</span>
<span class="token keyword">let</span> hexNum <span class="token operator">=</span> <span class="token number">0x12</span> <span class="token comment">// 十六进制 18</span>

<span class="token comment">// 非严格模式下，也可以表示八进制 18，严格模式下，前缀 0 会被视为语法错误</span>
<span class="token keyword">let</span> octaNum2 <span class="token operator">=</span> <span class="token number">020</span> 
<span class="token comment">// 非严格模式下，第一个数字为 0，如果第二个数字超过八进制数 7，就会忽略前面的 0，后面的数字会被当成十进制。</span>
<span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token number">099</span> 
</code></pre></div><h4 id="浮点值"><a href="#浮点值" class="header-anchor">#</a> 浮点值</h4> <p>要定义浮点值，数值中必须包含小数点，而且小数点后面必须至少有一个数字。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> floatNum1 <span class="token operator">=</span> <span class="token number">1.5</span>
<span class="token keyword">let</span> floatNum2 <span class="token operator">=</span> <span class="token number">0.1</span>
<span class="token keyword">let</span> floatNum3 <span class="token operator">=</span> <span class="token number">.1</span> <span class="token comment">// 有效，但不推荐</span>

<span class="token keyword">let</span> floatNum4 <span class="token operator">=</span> <span class="token number">1.</span> <span class="token comment">// 小数点后面没有数字，会被当成整数 1 处理</span>
<span class="token keyword">let</span> floatNum5 <span class="token operator">=</span> <span class="token number">10.0</span> <span class="token comment">// 小数点后面是零，会被当成整数 10 处理</span>
</code></pre></div><p>ECMAScript 中科学记数法的格式是一个数值后跟一个大写或小写的字母 <code>e</code>，再加上 10 的次幂数。默认情况下，小数点后至少包含 6 个零的浮点值会自动转换为科学记数法。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> floatNum1 <span class="token operator">=</span> <span class="token number">1.125e5</span> <span class="token comment">// 112500</span>
<span class="token keyword">let</span> floadtNum2 <span class="token operator">=</span> <span class="token number">0.0000003</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>floadtNum2<span class="token punctuation">)</span> <span class="token comment">// 3e-7</span>
</code></pre></div><details class="custom-block details"><summary>为什么 0.1 加 0.2 不等于 0.3 ？</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>sum<span class="token punctuation">)</span> <span class="token comment">// 0.30000000000000004 </span>
</code></pre></div><p>我们知道，数字以二进制的形式存储在内存中，二进制数字系统可以保证以 2 的整数次幂作为除数时能够正常工作，但 1/10 就变成了一个无限循环的二进制小数，所以无法精确存储 0.1 或 0.2。虽然 IEEE-754 数字格式通过将数字舍入到最接近的可能数字来解决此问题，但这种精度损失还是会存在。</p></details> <h4 id="值的范围"><a href="#值的范围" class="header-anchor">#</a> 值的范围</h4> <p>ECMAScript 可以表示的最小数值保存在 <code>Number.MIN_VALUE</code>，可以表示的最大数值保存在 <code>Number.MAX_VALUE</code> 中。</p> <p>如果某个计算得到的数值结果超出了可表示的范围，那么这个数值会被自动转换为一个特殊的 <code>Infinity</code>（无穷）值，负数以 <code>-Infinity</code>（负无穷大）表示，正数以 <code>Infinity</code>（正无穷大）表示。使用 <code>isFinite()</code> 函数可以判断一个数值是否是在可表示的范围内。</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span> <span class="token operator">/</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Infinity</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span> <span class="token operator">/</span> <span class="token operator">-</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -Infinity </span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isFinite</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true 空字符串或仅有空格的字符串会被视为 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isFinite</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token constant">NEGATIVE_INFINITY</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false Number.NEGATIVE_INFINITY 存储的是 -Infinity</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isFinite</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token constant">POSITIVE_INFINITY</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false Number.POSITIVE_INFINITY 存储的是 Infinity</span>
</code></pre></div><h4 id="nan"><a href="#nan" class="header-anchor">#</a> NaN</h4> <p><code>NaN</code> 是 Not a Number 的缩写，表示不是数值，它不等于包括它自身的任何值，通常用于表示原本要返回数值的失败操作。</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0</span> <span class="token operator">/</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// NaN</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">0</span> <span class="token operator">/</span> <span class="token operator">+</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// NaN</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">NaN</span> <span class="token operator">==</span> <span class="token number">NaN</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
</code></pre></div><p>使用 <code>isNaN()</code> 函数可以判断一个值是否是 <code>NaN</code>，任何不能转换为数值的值都会导致这个函数返回 <code>true</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token string">'2'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false，可以转换为数值 2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token string">'hi'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true，不可以转换为数值</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false，可以转换为数值 1</span>
</code></pre></div><p>使用 <code>Number.isNaN()</code> 工具函数（ES6 新增）也可以判断一个值是否是 <code>NaN</code>，仅当传入值为 <code>NaN</code> 时才返回 <code>true</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token string">'hi'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
</code></pre></div><h4 id="数值转换"><a href="#数值转换" class="header-anchor">#</a> 数值转换</h4> <p><code>Number()</code> 是转型函数，可用于任何数据类型。转换规则如下：</p> <ul><li><p>布尔值，<code>true</code> 转换为 <code>1</code>，<code>false</code> 转换为 <code>0</code>。</p></li> <li><p>数值，直接返回。</p></li> <li><p><code>null</code>，返回 <code>0</code>。</p></li> <li><p><code>undefined</code>，返回 <code>NaN</code>。</p></li> <li><p>字符串，应用以下规则。</p> <ul><li>如果字符串包含数值字符，包括数值字符前面带加、减号的情况，则转换为一个十进制数值（忽略前面的零）。</li> <li>如果字符串包含有效的浮点值格式，则会转换为相应的浮点值。</li> <li>如果字符串包含有效的十六进制格式，则会转换为对应的十进制整数值。</li> <li>如果是空字符串，则返回 <code>0</code>。</li> <li>如果字符串包含除上述情况之外的其他字符，则返回 <code>NaN</code>。</li></ul></li> <li><p>对象，调用 <code>valueOf()</code> 方法，并按照上述规则转换返回的值。如果转换结果是 <code>NaN</code>，则调用 <code>toString()</code> 方法，再按照转换字符串的规则转换。</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// NaN</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token string">'012'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 12</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token string">'012.5'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 12.5</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token string">'0xF'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 15</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token string">'hi'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// NaN</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// NaN</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
    <span class="token keyword">return</span> <span class="token number">1</span> 
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 1</span>
</code></pre></div><p><code>parseInt()</code> 函数更专注于字符串是否包含数值模式。转换规则如下：</p> <ul><li>从第一个非空格字符开始转换，如果第一个字符不是数值、加号或减号，立即返回 <code>NaN</code>。</li> <li>如果第一个非空格字符是数值字符、加号或减号，则依次检测后面每个字符，遇到非数值字符就结束检测并忽略剩余所有字符。</li> <li>如果字符串以 <code>0x</code> 开头，会被解释为十六进制整数。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// NaN</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">'a123'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// NaN</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">'-123hi'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// -123</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">'0xA'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 10</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token number">22.5</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 22</span>
</code></pre></div><p><code>parseInt()</code> 接收第二个参数，用于指定进制数。</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">'020'</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 16</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">'20'</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 16</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">'0xAA'</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 170</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">'AA'</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 170</span>
</code></pre></div><p><code>parseFloat()</code> 函数的工作方式跟 <code>parseInt()</code> 函数类似。具体规则如下：</p> <ul><li>从第一个非空格字符开始解析，并忽略字符串开头的零，解析到字符串末尾或者解析到一个无效的浮点数值字符为止。</li> <li>字符串中第一次出现的小数点有效，第二次出现的小数点无效且忽略剩余的字符。</li> <li>只能识别浮点格式以及十进制格式，识别十六进制数值始终会返回 <code>0</code>。</li> <li>如果字符串表示整数（包括小数点后面只有一个零），则返回整数。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">'  001.5a'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 1.5</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">'1.3.5'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 1.3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">'0xAA'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">'123hi'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 123</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">'10.0'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 10</span>
</code></pre></div><h3 id="string-类型"><a href="#string-类型" class="header-anchor">#</a> String 类型</h3> <p><strong>String</strong>（字符串）数据类型表示零或多个 16 位 Unicode 字符序列。<br>
字符串必须使用双引号（&quot;）、单引号（'）或反引号（`）包起来。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> name1 <span class="token operator">=</span> <span class="token string">'neal'</span>
<span class="token keyword">let</span> name2 <span class="token operator">=</span> <span class="token string">&quot;neal&quot;</span>
<span class="token keyword">let</span> name3 <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">neal</span><span class="token template-punctuation string">`</span></span>
</code></pre></div><h4 id="字符字面量"><a href="#字符字面量" class="header-anchor">#</a> 字符字面量</h4> <p>字符串数据类型包含一些字符字面量，用于表示非打印字符或有其他用途的字符。</p> <table><thead><tr><th style="text-align:left;">字面量</th> <th style="text-align:left;">含义</th></tr></thead> <tbody><tr><td style="text-align:left;"><code>\n</code></td> <td style="text-align:left;">换行</td></tr> <tr><td style="text-align:left;"><code>\t</code></td> <td style="text-align:left;">制表符</td></tr> <tr><td style="text-align:left;"><code>\b</code>,<code>\f</code>,<code>\v</code></td> <td style="text-align:left;">退格，换页，垂直标签，已经不使用</td></tr> <tr><td style="text-align:left;"><code>\r</code></td> <td style="text-align:left;">回车，不单独使用。Windows 文本文件使用两个字符 \r\n 的组合来表示换行</td></tr> <tr><td style="text-align:left;"><code>\\</code></td> <td style="text-align:left;">反斜杠</td></tr> <tr><td style="text-align:left;"><code>\'</code>,<code>\&quot;</code>,<code>\`</code></td> <td style="text-align:left;">引号</td></tr> <tr><td style="text-align:left;"><code>\xXX</code></td> <td style="text-align:left;">以十六进制编码 <code>XX</code> 表示的字符，例如 <code>'\x41'</code> 等于 <code>'A'</code></td></tr> <tr><td style="text-align:left;"><code>\uXXXX</code></td> <td style="text-align:left;">以十六进制编码 <code>XXXX</code> 表示的 Unicode 字符，例如 <code>'\u03a3'</code> 等于希腊字符 <code>'Σ'</code></td></tr> <tr><td style="text-align:left;"><code>\u{X…XXXXXX}</code>（1 到 6 个十六进制字符）</td> <td style="text-align:left;">具有给定 UTF-32 编码的 Unicode 符号。一些罕见的字符用两个 Unicode 符号编码，占用 4 个字节。例如 <code>'\u{1F60D}'</code> 等于 😍</td></tr></tbody></table> <h4 id="字符串的特点"><a href="#字符串的特点" class="header-anchor">#</a> 字符串的特点</h4> <p>ECMAScript 中的字符串是不可变的。要修改某个变量中的字符串值，必须先销毁原始的字符串，然后将包含新值的另一个字符串保存到该变量。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'hi'</span>
str<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'H'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// h</span>
</code></pre></div><h4 id="转换为字符串"><a href="#转换为字符串" class="header-anchor">#</a> 转换为字符串</h4> <p>使用 <code>toString()</code> 方法可以返回当前值的字符串等价物。它遵循以下规则：</p> <ul><li><code>toString()</code> 方法可见于数值、布尔值、对象和字符串值，<code>null</code> 和 <code>undefined</code> 值没有该方法。</li> <li>对数值调用这个方法时，<code>toString()</code> 可以接收一个参数，表示以什么进制来输出数值的字符串表示，默认十进制。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">18</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>age<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// &quot;18&quot;</span>

<span class="token keyword">let</span> found <span class="token operator">=</span> <span class="token boolean">false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>found<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// &quot;false&quot;</span>

<span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;10&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;1010&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;12&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;10&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;a&quot; </span>
</code></pre></div><p>使用 <code>String()</code> 转型函数始终会返回表示相应类型值的字符串。它遵循以下规则：</p> <ul><li>如果值有 toString()方法，则调用该方法（不传参数）并返回结果。</li> <li>如果值是 null，返回&quot;null&quot;。</li> <li>如果值是 undefined，返回&quot;undefined&quot;。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> v1 <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> v2 <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> v3 <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> v4<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">String</span><span class="token punctuation">(</span>v1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;10&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">String</span><span class="token punctuation">(</span>v2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;true&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">String</span><span class="token punctuation">(</span>v3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;null&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">String</span><span class="token punctuation">(</span>v4<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;undefined&quot; </span>
</code></pre></div><h4 id="模板字面量"><a href="#模板字面量" class="header-anchor">#</a> 模板字面量</h4> <p>ECMAScript 6 新增了使用模板字面量定义字符串的能力。</p> <ul><li>模板字面量保留换行字符，支持跨行定义字符串。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> description <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
hi, 
long time no see!</span><span class="token template-punctuation string">`</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>description<span class="token punctuation">)</span>
<span class="token comment">// hi, </span>
<span class="token comment">// long time no see!</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>description<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'\n'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre></div><ul><li>模板字面量支持字符串插值，通过在 <code>${}</code> 中使用一个 JavaScript 表达式实现。所有插入的值都会使用 <code>toString()</code> 强制转型为字符串，嵌套的模板字符串无须转义。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">'neal'</span>
<span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function-variable function">toString</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token string">'18'</span> <span class="token punctuation">}</span>
<span class="token keyword">let</span> intro <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">my name is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>intro<span class="token punctuation">)</span> <span class="token comment">// &quot;my name is neal&quot;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>intro<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token comment">// &quot;my name is neal, 18 years old.&quot;</span>
</code></pre></div><ul><li>模板字面量也支持定义标签函数。标签函数用于自定义插值行为，它接收的参数依次是原始字符串数组和对每个表达式求值的结果，返回值是对模板字面量求值得到的字符串。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">2</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">3</span>
<span class="token keyword">function</span> <span class="token function">tag</span><span class="token punctuation">(</span><span class="token parameter">strings<span class="token punctuation">,</span> <span class="token operator">...</span>expressions</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>strings<span class="token punctuation">,</span> expressions<span class="token punctuation">)</span> <span class="token comment">// [ '', ' * ', ' = ', '' ] [ 2, 3, 6 ]</span>
  <span class="token keyword">return</span> expressions<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>e<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>strings<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> untaggedResult <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> * </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> = </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a <span class="token operator">*</span> b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token keyword">let</span> taggedResult <span class="token operator">=</span> tag<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> * </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> = </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a <span class="token operator">*</span> b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>untaggedResult<span class="token punctuation">)</span> <span class="token comment">// &quot;2 * 3 = 6&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>taggedResult<span class="token punctuation">)</span> <span class="token comment">// &quot;2 * 3 = 6&quot;</span>
</code></pre></div><ul><li>模板字面量也可以直接获取原始的模板字面量内容。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\u00A9</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ©</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>String<span class="token punctuation">.</span>raw<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\u00A9</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u00A9 </span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>String<span class="token punctuation">.</span>raw<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">first line\nsecond line</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;first line\nsecond line&quot; </span>
</code></pre></div><h3 id="symbol-类型"><a href="#symbol-类型" class="header-anchor">#</a> Symbol 类型</h3> <p><strong>Symbol</strong>（符号）是 ECMAScript 6 新增的数据类型，用于创建唯一标识符。</p> <h4 id="基本用法"><a href="#基本用法" class="header-anchor">#</a> 基本用法</h4> <p>使用 <code>Symbol()</code> 函数可以初始化一个 Symbol，同时可以传入一个字符串参数作为对该符号的描述。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> symbol1 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'fff'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> symbol1<span class="token punctuation">)</span> <span class="token comment">// &quot;symbol&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>symbol1<span class="token punctuation">)</span> <span class="token comment">// Symbol(fff)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>symbol1<span class="token punctuation">.</span>description<span class="token punctuation">)</span> <span class="token comment">// &quot;fff&quot;</span>

<span class="token comment">// 不能将 Symbol() 函数作为构造函数使用</span>
<span class="token keyword">let</span> symbol2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// TypeError: Symbol is not a constructor</span>

<span class="token comment">// 可以使用 Object() 函数包装 Symbol</span>
<span class="token keyword">let</span> symbol3 <span class="token operator">=</span> <span class="token function">Object</span><span class="token punctuation">(</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>symbol3<span class="token punctuation">)</span> <span class="token comment">// Symbol {Symbol()}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> symbol3<span class="token punctuation">)</span> <span class="token comment">// &quot;object&quot;</span>
</code></pre></div><h4 id="全局-symbol"><a href="#全局-symbol" class="header-anchor">#</a> 全局 Symbol</h4> <p>可以在全局 Symbol 注册表中创建全局 Symbol，以供代码其他部分共享和重用。使用 <code>Symbol.for()</code> 方法可以从注册表中读取（不存在则创建) Symbol，需要传入一个字符串（非字符串会转为字符串）作为键。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 读取失败，创建全局 Symbol</span>
<span class="token keyword">let</span> globalSymbol1 <span class="token operator">=</span> Symbol<span class="token punctuation">.</span><span class="token function">for</span><span class="token punctuation">(</span><span class="token string">'fff'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> globalSymbol1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;symbol&quot; </span>

<span class="token comment">// 读取全局 Symbol</span>
<span class="token keyword">let</span> globalSymbol2 <span class="token operator">=</span> Symbol<span class="token punctuation">.</span><span class="token function">for</span><span class="token punctuation">(</span><span class="token string">'fff'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>globalSymbol1 <span class="token operator">===</span> globalSymbol2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>

<span class="token comment">// 再次读取全局 Symbol</span>
<span class="token keyword">let</span> globalSymbol3 <span class="token operator">=</span> Symbol<span class="token punctuation">.</span><span class="token function">for</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token string">'fff'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>globalSymbol1 <span class="token operator">===</span> globalSymbol3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div><p>使用 <code>Symbol.keyFor()</code> 方法可以查询全局注册表，返回传入的全局 Symbol 对应的字符串键。如果查询的不是全局 Symbol，则返回 <code>undefined</code>；如果传入参数不是 Symbol，则返回，则抛出 TypeError。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> globalSymbol <span class="token operator">=</span> Symbol<span class="token punctuation">.</span><span class="token function">for</span><span class="token punctuation">(</span><span class="token string">'js'</span><span class="token punctuation">)</span> <span class="token comment">// 全局符号</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Symbol<span class="token punctuation">.</span><span class="token function">keyFor</span><span class="token punctuation">(</span>globalSymbol<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// &quot;js&quot;</span>

<span class="token keyword">let</span> symbol <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'css'</span><span class="token punctuation">)</span> <span class="token comment">// 普通符号</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Symbol<span class="token punctuation">.</span><span class="token function">keyFor</span><span class="token punctuation">(</span>symbol<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// &quot;undefined&quot;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Symbol<span class="token punctuation">.</span><span class="token function">keyFor</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// TypeError: 1 is not a symbol</span>
</code></pre></div><h4 id="使用-symbol-作为属性"><a href="#使用-symbol-作为属性" class="header-anchor">#</a> 使用 Symbol 作为属性</h4> <p>凡是可以使用字符串或数值作为属性的地方，都可以使用 Symbol。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> symbol1 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> symbol2 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> symbol3 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'c'</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> symbol4 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'d'</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>symbol1<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> symbol2<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  value<span class="token operator">:</span> <span class="token string">'B'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperties</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>symbol3<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token string">'C'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>symbol4<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token string">'D'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token comment">// {Symbol(a): &quot;A&quot;, Symbol(b): &quot;B&quot;, Symbol(c): &quot;C&quot;, Symbol(d): &quot;D&quot;}</span>
</code></pre></div><ul><li><code>for..in</code> 循环和 <code>Object.keys()</code> 方法会忽略 Symbol 属性。</li> <li><code>Object.assign()</code> 方法会同时复制字符串和 Symbol 属性。</li> <li><code>Object.getOwnPropertyNames()</code> 返回对象的常规属性数组，<code>Object.getOwnPropertySymbols()</code> 返回对象的 Symbol 属性数组。</li> <li><code>Object.getOwnPropertyDescriptors()</code> 会返回同时包含常规和 Symbol 属性描述符的对象，<code>Reflect.ownKeys()</code> 会返回两种类型的键。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  firstName<span class="token operator">:</span> <span class="token string">'neal'</span><span class="token punctuation">,</span>
  lastName<span class="token operator">:</span> <span class="token string">'feng'</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'age'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// &quot;firstName&quot;</span>
<span class="token comment">// &quot;lastName&quot;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [&quot;firstName&quot;, &quot;lastName&quot;]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyNames</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [&quot;firstName&quot;, &quot;lastName&quot;]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">getOwnPropertySymbols</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [Symbol(age)]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyDescriptors</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// {firstName: {…}, lastName: {…}, Symbol(age): {…}}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Reflect<span class="token punctuation">.</span><span class="token function">ownKeys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [&quot;firstName&quot;, &quot;lastName&quot;, Symbol(age)]</span>
</code></pre></div><p>Symbol 属性是对内存中 Symbol 的一个引用，如果没有显式地保存对 Symbol 属性的引用，那么必须遍历对象的所有符号属性才能找到相应的属性键。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'js'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'JavaScript'</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'css'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'Cascading Style Sheets'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> jsSymbol <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getOwnPropertySymbols</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">s</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> s<span class="token punctuation">.</span>description <span class="token operator">===</span> <span class="token string">'js'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>jsSymbol<span class="token punctuation">)</span> <span class="token comment">// Symbol(js)</span>
</code></pre></div><h4 id="系统-symbol"><a href="#系统-symbol" class="header-anchor">#</a> 系统 Symbol</h4> <p>JavaScript 内部有很多“系统” Symbol，用于暴露语言内部行为，我们可以使用它们来微调对象的各个方面。例如 <code>Symbol.iterator</code> 返回对象默认的迭代器，由类似 <code>for-of</code> 语句的接收可迭代对象的原生语言特性使用，我们可以按需重写某个对象的 <code>Symbol.iterator</code> 返回的迭代器。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Double</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>params <span class="token operator">=</span> params
  <span class="token punctuation">}</span>

  <span class="token operator">*</span> <span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">yield</span><span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>params<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> v <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Double</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> element <span class="token keyword">of</span> foo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 2</span>
<span class="token comment">// 4</span>
<span class="token comment">// 6</span>
</code></pre></div><p>更多“系统” Symbol 请参考<a href="https://tc39.es/ecma262/#sec-well-known-symbols" target="_blank" rel="noopener noreferrer">Well-known Symbols<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="bigint-类型"><a href="#bigint-类型" class="header-anchor">#</a> BigInt 类型</h3> <p><strong>BigInt</strong> 是一种特殊的数字类型，它可以表示任意大的整数。可以在一个整数字面量后面加 <code>n</code> 或者调用 <code>BigInt()</code> 函数定义一个 <code>BigInt</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> bigint1 <span class="token operator">=</span> <span class="token number">123456789n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> bigint1<span class="token punctuation">)</span> <span class="token comment">// &quot;bigint&quot;</span>

<span class="token keyword">const</span> bigint2 <span class="token operator">=</span> <span class="token function">BigInt</span><span class="token punctuation">(</span><span class="token number">987654321</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> bigint2<span class="token punctuation">)</span> <span class="token comment">// &quot;bigint&quot;</span>
</code></pre></div><p><code>+</code>（非一元 <code>+</code>）、<code>*</code>、<code>-</code>、<code>**</code>、<code>%</code>、<code>==</code>、<code>===</code>、<code>!</code>、<code>!!</code> 以及除 <code>&gt;&gt;&gt;</code>（无符号右移）之外的位操作，这些操作符都可以和 <code>BigInt</code> 一起使用，其中带小数的运算会被向零取整。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> bigint1 <span class="token operator">=</span> <span class="token number">3n</span>
<span class="token keyword">const</span> bigint2 <span class="token operator">=</span> <span class="token number">2n</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bigint1 <span class="token operator">+</span> bigint2<span class="token punctuation">)</span> <span class="token comment">// 5n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bigint1 <span class="token operator">-</span> bigint2<span class="token punctuation">)</span> <span class="token comment">// 1n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bigint2 <span class="token operator">-</span> bigint1<span class="token punctuation">)</span> <span class="token comment">// -1n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bigint1 <span class="token operator">*</span> bigint2<span class="token punctuation">)</span> <span class="token comment">// 6n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bigint1 <span class="token operator">/</span> bigint2<span class="token punctuation">)</span> <span class="token comment">// 1n 被向零取整</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bigint1 <span class="token operator">**</span> bigint2<span class="token punctuation">)</span> <span class="token comment">// 9n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bigint1 <span class="token operator">%</span> bigint2<span class="token punctuation">)</span> <span class="token comment">// 1n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bigint1 <span class="token operator">&gt;&gt;</span> bigint2<span class="token punctuation">)</span> <span class="token comment">// 0n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bigint1 <span class="token operator">&lt;&lt;</span> bigint2<span class="token punctuation">)</span> <span class="token comment">// 12n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0n</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0n</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0n</span> <span class="token operator">||</span> bigint1<span class="token punctuation">)</span> <span class="token comment">// 3n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0n</span> <span class="token operator">&amp;&amp;</span> bigint1<span class="token punctuation">)</span> <span class="token comment">// 0n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">!</span>bigint1<span class="token punctuation">)</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token number">0n</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre></div><h3 id="object-类型"><a href="#object-类型" class="header-anchor">#</a> Object 类型</h3> <p>ECMAScript 中的对象是一组数据和功能的集合。可以通过创建 <strong>Object</strong> 类型的实例来创建对象，每个 Object 实例都有以下属性和方法。</p> <ul><li><code>constructor</code>：用于创建当前对象的函数。</li> <li><code>hasOwnProperty(propertyName)</code>：用于判断当前对象实例（非原型）上是否存在给定的属性，传入的属性名必须是字符串或 Symbol。</li> <li><code>isPrototypeOf(object)</code>：用于判断当前对象是否为另一个对象的原型。</li> <li><code>propertyIsEnumerable(propertyName)</code>：用于判断给定的属性是否可以使用 <code>for-in</code> 语句枚举。</li> <li><code>toString()</code>：返回对象的字符串表示，该字符串反映对象所在的本地化执行环境。</li> <li><code>toLocaleString()</code>：返回对象的字符串表示。</li> <li><code>valueOf()</code>：返回对象对应的字符串、数值或布尔值表示。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
person<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'neal'</span>
person<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">20</span>

<span class="token keyword">const</span> cat <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
cat<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'seven'</span>
cat<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'white'</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span>constructor<span class="token punctuation">)</span> <span class="token comment">// ƒ Object() { [native code] }</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span><span class="token function">isPrototypeOf</span><span class="token punctuation">(</span>cat<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span><span class="token function">propertyIsEnumerable</span><span class="token punctuation">(</span><span class="token string">'age'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [object Object]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [object Object]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// {name: &quot;neal&quot;, age: 20}</span>
</code></pre></div><h2 id="操作符"><a href="#操作符" class="header-anchor">#</a> 操作符</h2> <h3 id="一元操作符"><a href="#一元操作符" class="header-anchor">#</a> 一元操作符</h3> <h4 id="递增-和-递减-操作符"><a href="#递增-和-递减-操作符" class="header-anchor">#</a> <code>++</code>（递增） 和 <code>--</code>（递减）操作符</h4> <p>前缀版 <code>++</code> 和  <code>--</code> 位于变量前面，变量值在语句被求值之前改变。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">++</span>a <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// 2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">--</span>a <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 2</span>
</code></pre></div><p>后缀版 <code>++</code> 和 <code>--</code> 位于变量后面，变量值在语句被求值之后改变。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token operator">++</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// 2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token operator">--</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// 1</span>
</code></pre></div><p><code>++</code> 和 <code>--</code> 操作符可以作用于任何值，如果该值是非数值，将会发生隐式数值转换，其遵循如下规则。</p> <ul><li>对于字符串，则转换为数值再应用改变。</li> <li>对于布尔值，如果是 <code>false</code>，则转换为 <code>0</code>，如果是 <code>true</code>，则转换为 <code>1</code>，再应用改变。</li> <li>对于数值，加 <code>1</code> 或减 <code>1</code>。</li> <li>如果是对象，则调用其 <code>valueOf()</code> 方法取得可以操作的值再应用上述规则，如果得到的值是 <code>NaN</code>，则调用 <code>toString()</code> 并再次应用上述规则。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token string">'1'</span>
<span class="token keyword">let</span> c <span class="token operator">=</span> <span class="token string">'1.2'</span>
<span class="token keyword">let</span> d <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token keyword">let</span> e <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token number">1</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token comment">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// 2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token comment">// 1 </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token comment">// 1.2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token comment">// 2.2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token comment">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span> <span class="token comment">// 2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token comment">// 1 </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token comment">// 0</span>
</code></pre></div><h4 id="一元加-和-一元减"><a href="#一元加-和-一元减" class="header-anchor">#</a> <code>+</code>(一元加)和 <code>-</code>(一元减)</h4> <p>一元加放在变量前面，对数值没有任何影响，对非数值会与使用 <code>Number()</code> 转型函数一样的类型转换。</p> <p>一元减遇到数值时会将其转成相应的负值，遇到非数值时会遵循与一元加同样的规则，转换后再取负值。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token operator">+</span><span class="token number">1</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token operator">+</span><span class="token string">'f'</span>
<span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token operator">-</span><span class="token string">'2'</span>
<span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token operator">-</span><span class="token punctuation">{</span>
  <span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token number">1</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// NaN</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token comment">// -2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span> <span class="token comment">// -1</span>
</code></pre></div><h3 id="位操作符"><a href="#位操作符" class="header-anchor">#</a> 位操作符</h3></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/Fengfengfeng-up/personal-docs/edit/main/docs/my-docs/js/language-basics.md" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">1/8/2021, 8:19:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/my-docs/js/javascript-in-html.html" class="prev">
        HTML 中的 JavaScript
      </a></span> <!----></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.e45e7f79.js" defer></script><script src="/assets/js/4.1dc261f9.js" defer></script><script src="/assets/js/32.57021f58.js" defer></script>
  </body>
</html>
